<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    var {createApp} = Vue;
    var {ref,reactive} = Vue;
    var {unref,toRaw,markRaw,isRef,isReactive} = Vue;


    // unref()
    // 如果参数是 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val 计算的一个语法糖。
    // 可以获取ref对象存储的value值   

    // toRaw()
    // 根据一个 Vue 创建的代理返回其原始对象。 =>传入一个proxy对象,返回其原始对象
    // 注意: toRaw() 可以返回由 reactive()、readonly()、shallowReactive() 或者 shallowReadonly() 创建的代理对应的原始对象。

    // markRaw()
    // 将一个对象标记为不可被转为代理。返回该对象本身。

    // isRef()   检查某个值是否为 ref。  

    // isReactive()​
    // 检查一个对象是否是由 reactive() 或 shallowReactive() 创建的代理。

    // isReadonly()​
    // 检查传入的值是否为只读对象。只读对象的属性可以更改，但他们不能通过传入的对象直接赋值。
    // 通过 readonly() 和 shallowReadonly() 创建的代理都是只读的，

    // isProxy() 
    // 检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理。

    var app = createApp({
        setup(){

            let a = ref(10);
            let zhang =  reactive({name:"张三",age:18});

            // console.log("a",a);
            // console.log("zhang",zhang);

            //  如果参数是 ref，则返回内部值，否则返回参数本身
            // console.log(unref(a));  // isRef(a)?a.value:a;
            // console.log(unref(1000));

            // 传入一个proxy对象,返回其原始对象
            // console.log(toRaw(zhang));

            var liSi = markRaw({name:"李四",age:22}); //传入普通对象  => 将一个对象标记为不可被转为代理
            console.log(liSi);  // {name:"李四",age:22,__v_skip:true}

            var res = reactive(liSi);
            console.log(res);
            

            console.log(isRef(a));
            console.log(isReactive(zhang));
            console.log(isReactive(liSi));

            return {
                a,
                zhang
            }
        }
    })

    app.mount("#app");

</script>
</html>